// 页面标签部分
<template>
  <!-- 有且只能有一个div盒子，里面可以包含多个页面标签元素 -->
  <div>
    <div class="drop">
      <ul>
        <li>我的姓名是{{ uname }}</li>
        <li>我的爱好不是{{ hobby && '足球' }}</li>
        <li>我现在是{{ age > 20 ? '混吃等死' : '正值青春' }}</li>
        <li>我的手头有{{ money }}元</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: '张三',
      hobby: '篮球',
      age: 24,
      money: 2000
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
div {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #eee;
}
.drop {
  display: flex;
  align-items: center;
  position: relative;
  width: 1000px;
  height: 150px;
  box-shadow: inset 10px 10px 10px rgba(0, 0, 0, 0.05), 15px 25px 10px rgba(0, 0, 0, 0.05),
    15px 20px 20px rgba(0, 0, 0, 0.05), inset -10px 10px 15px rgba(255, 255, 255, 0.9);
  border-radius: 50%;
}
.drop::before {
  content: '';
  position: absolute;
  top: 220px;
  left: 125px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
}
.drop::after {
  content: '';
  position: absolute;
  top: 200px;
  left: 250px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
}
ul {
  list-style: none;
}
ul li {
  padding-top: 30px;
  color: #087;
}
</style>
